import React, { Component } from 'react';
import './../lastupload.scss';

class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pop: []
    }
  }
  componentDidMount () {
    let f_type = '往期头条';
    let type = JSON.stringify(f_type)
    // $('.menu-page-title').empty().append(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }

  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }
  render () {
    let pop = this.state.pop;
    return (
      <div className="works-best">
        <div className="last-container">
        
        <ul className="last-container-list">
          {
            pop.map((item, index) => {
              let fid = item.f_id
              let uname = item.u_name
              return(
                <li>
                  <div className="last-containerImg"><img src={ item.banner } alt=""  onClick={ this.goDetail.bind(this, fid)}/></div>
                  <h2>晚餐●2018年12月28日</h2>
                  <p className="last-name">{item.ingredients} #晚餐●2018年12月28日#</p>
                  <p className="last-red"><span>21小时前</span><span><i className="iconfont icon-chakan"></i>{item.number}</span><span><i className="iconfont icon-xinxi"></i>{item.score}</span></p>
                  <p className="last-user"  onClick={ this.goUsers.bind(this,uname)}><img src="http://img5.duitang.com/uploads/item/201410/05/20141005082835_2RTzn.thumb.700_0.jpeg" alt=""/><span>{item.u_name}</span><span className="iconfont icon-chushimao2"></span></p>
                </li>
              )
            })
          }
        </ul>
      </div>
      </div>
    )
  }
}

export default Com;
